<template>
  <div class="weakness-identification">
    <!-- 综合仪表板 -->
    <div class="mb-6">
      <div class="grid grid-cols-3 gap-4">
        <!-- 短板科目卡片 -->
        <div class="bg-red-50 border border-red-200 rounded-lg p-4 relative">
          <div class="flex items-center">
            <div class="i-mdi:alert-circle w-6 h-6 text-red-500 mr-3"></div>
            <div>
              <div class="text-sm text-gray-600">短板科目</div>
              <div class="text-xl font-bold text-red-600">{{ weaknessData.weaknessSubjects.length }}个</div>
            </div>
          </div>
          <!-- 问号图标 -->
          <div class="absolute top-2 right-2">
            <el-tooltip content="短板科目是指成绩低于班级平均分10%以上的科目，需要重点关注和改进" placement="top" effect="dark">
              <div class="i-mdi:help-circle w-4 h-4 text-red-400 cursor-pointer hover:text-red-600 transition-colors help-icon"></div>
            </el-tooltip>
          </div>
        </div>

        <!-- 综合发展指数卡片 -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 relative">
          <div class="flex items-center">
            <div class="i-mdi:chart-line w-6 h-6 text-blue-500 mr-3"></div>
            <div>
              <div class="text-sm text-gray-600">综合发展指数</div>
              <div class="text-xl font-bold text-blue-600">{{ weaknessData.developmentIndex }}/10</div>
            </div>
          </div>
          <!-- 问号图标 -->
          <div class="absolute top-2 right-2">
            <el-tooltip content="综合发展指数基于各科目成绩的均衡性、稳定性和进步趋势综合评估，满分10分。评估标准：各科目成绩标准差、历史进步幅度、学习投入度等" placement="top" effect="dark" :max-width="300">
              <div class="i-mdi:help-circle w-4 h-4 text-blue-400 cursor-pointer hover:text-blue-600 transition-colors help-icon"></div>
            </el-tooltip>
          </div>
        </div>

        <!-- 优势科目卡片 -->
        <div class="bg-green-50 border border-green-200 rounded-lg p-4 relative">
          <div class="flex items-center">
            <div class="i-mdi:check-circle w-6 h-6 text-green-500 mr-3"></div>
            <div>
              <div class="text-sm text-gray-600">优势科目</div>
              <div class="text-xl font-bold text-green-600">{{ strengthSubjectsCount }}个</div>
            </div>
          </div>
          <!-- 问号图标 -->
          <div class="absolute top-2 right-2">
            <el-tooltip content="优势科目是指成绩高于班级平均分5%以上的科目，可以作为学习方法和经验的参考" placement="top" effect="dark">
              <div class="i-mdi:help-circle w-4 h-4 text-green-400 cursor-pointer hover:text-green-600 transition-colors help-icon"></div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <!-- 雷达图展示 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">各科目水平雷达图</h3>
      <div class="bg-gray-50 rounded-lg p-6 flex items-center justify-center">
        <div class="w-full max-w-lg">
          <RadarChart :subjects="weaknessData.subjects" :width="450" :height="350" />
        </div>
      </div>
    </div>

    <!-- 短板科目详细数据 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">短板科目详细分析</h3>
      <el-table :data="weaknessSubjects" stripe class="w-full">
        <el-table-column prop="name" label="科目">
          <template #default="{ row }">
            <div class="flex items-center">
              <div class="i-mdi:alert-circle w-4 h-4 text-red-500 mr-2"></div>
              <span class="font-medium">{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="当前分数">
          <template #default="{ row }">
            <span class="font-bold text-red-600">{{ row.score }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="averageScore" label="班级平均分">
          <template #default="{ row }">
            <span class="text-gray-600">{{ row.averageScore }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gap" label="分数差距">
          <template #default="{ row }">
            <span class="text-red-600">{{ row.gap > 0 ? '+' : '' }}{{ row.gap }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="percentage" label="差距百分比">
          <template #default="{ row }">
            <span class="text-red-600">{{ row.percentage > 0 ? '+' : '' }}{{ row.percentage }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="viewHistory(row)">
              查看历史
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 历史表现趋势 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">短板科目历史表现</h3>
      <div class="bg-gray-50 rounded-lg p-6">
        <HistoryTrendChart :weakness-subjects="weaknessSubjects" :height="350" />
      </div>
    </div>

    <!-- 改进建议 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">改进建议</h3>
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <div class="flex items-start mb-3">
          <div class="i-mdi:lightbulb w-5 h-5 text-blue-500 mr-2 mt-0.5"></div>
          <h4 class="font-medium text-blue-800">个性化学习建议</h4>
        </div>
        <ul class="space-y-2">
          <li v-for="(recommendation, index) in weaknessData.recommendations" :key="index" class="flex items-start">
            <div class="i-mdi:check-circle w-4 h-4 text-blue-500 mr-2 mt-0.5"></div>
            <span class="text-blue-700">{{ recommendation }}</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 行动计划 -->
    <div>
      <h3 class="text-lg font-semibold mb-4">行动计划</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white border border-gray-200 rounded-lg p-4">
          <h4 class="font-medium mb-3 text-gray-800">短期目标（1-2周）</h4>
          <ul class="space-y-2 text-sm text-gray-600">
            <li>• 制定数学专项学习计划</li>
            <li>• 每天增加30分钟数学练习时间</li>
            <li>• 整理数学错题本</li>
          </ul>
        </div>
        <div class="bg-white border border-gray-200 rounded-lg p-4">
          <h4 class="font-medium mb-3 text-gray-800">中期目标（1个月）</h4>
          <ul class="space-y-2 text-sm text-gray-600">
            <li>• 数学成绩提升5-8分</li>
            <li>• 掌握基础知识点</li>
            <li>• 建立解题思维模式</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import RadarChart from './RadarChart.vue'
import HistoryTrendChart from './HistoryTrendChart.vue'

// 定义props
const props = defineProps({
  weaknessData: {
    type: Object,
    required: true
  }
})

// 计算属性
const weaknessSubjects = computed(() => {
  return props.weaknessData.subjects.filter(subject => subject.isWeakness)
})

const strengthSubjectsCount = computed(() => {
  return props.weaknessData.subjects.filter(subject => !subject.isWeakness).length
})

// 方法
const viewHistory = (subject) => {
  console.log('查看历史:', subject.name)
  // 这里可以添加查看历史成绩的逻辑
}
</script>

<style lang="scss" scoped>
.weakness-identification {
  .el-table {
    .el-table__header {
      background-color: #f8fafc;
    }
  }

  // 问号图标样式
  .help-icon {
    transition: all 0.2s ease;

    &:hover {
      transform: scale(1.1);
    }
  }

  // 卡片悬停效果
  .bg-red-50,
  .bg-blue-50,
  .bg-green-50 {
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}
</style> 